<template>
  <el-dialog :title="this.$parent.tabtitle" :visible.sync="addFormVisible" width="30%">
    <el-form label-width="110px" label-position="left">
      <el-form-item label="角色名称">
        <el-input v-model="roleValue.name" style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="显示名称">
        <el-input v-model="roleValue.display_name" style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input v-model="roleValue.description" style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="角色权限">
        <el-checkbox-group v-model="roleValue.permission_id">
          <el-checkbox v-for="item in this.$parent.permissionsList" :label="item.id" :key="item.id">{{item.display_name}}</el-checkbox><br />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="setRole">确认</el-button>
        <el-button @click.native="addFormVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
    export default {
        name: "roledialog",
      data(){
        return{
          addFormVisible : false,
          roleValue : {
            permission_id : []
          }
        }
      },
      methods:{
        //提交添加/修改
        setRole(){
          // console.log(this.roleValue)
          this.$parent.setRole();
        }
      },
      watch: {
        'addFormVisible': function (newVal) {
          if (newVal == false){
            this.roleValue = {
              permission_id : []
            }
          }
        }
      }
    }
</script>

<style scoped>

</style>
